<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false">
      <el-menu-item index="0">
        <img src="@/assets/images/logo.png" style="width: 70px; height: 40px" />
        光谷智慧交通
        {{ user_type === '管理员' ? '《管理员》' : '《交通部门》' }}
      </el-menu-item>
      <el-menu-item index="1">实时路况</el-menu-item>
      <el-menu-item index="2" @click="dialogRoad = true">审核上报</el-menu-item>
      <el-sub-menu index="3">
        <template #title>事件管理</template>
        <el-menu-item index="3-1" @click="viewAllEvents">所有事件</el-menu-item>
        <el-menu-item index="3-2" @click="queryEvents">拉框查询</el-menu-item>
        <el-menu-item index="3-3" @click="addEvent">添加事件</el-menu-item>
        <el-menu-item index="3-4" @click="changeEvent">更新事件</el-menu-item>
        <el-menu-item index="3-5" @click="accidentProneAreasChart">事故多发地热力图</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="4" @click="showNotice">发布公告</el-menu-item>
      <el-menu-item index="5" @click="useSingleAnalysis">缓冲区分析</el-menu-item>
      <el-menu-item index="6" @click="dialogUser = true" v-if="user_type === '管理员'">
        用户管理
      </el-menu-item>
      <el-dropdown trigger="click">
        <span>
          <el-avatar :size="40" :src="imgUrl"></el-avatar>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="dialogPassword = true">修改密码</el-dropdown-item>
            <el-dropdown-item divided @click.native.prevent="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-menu-item index="6">
        <el-input
          v-model.trim="search"
          placeholder="请输入相应关键字"
          @change="keyUpSearch"
          @keyup.enter="keyUpSearch"
        >
          <template #prepend>
            <el-button :icon="Search" />
          </template>
          <template #append>
            <!-- <el-cascader v-model="select" :options="options" /> -->
            <el-select v-model="select" :placeholder="select" style="width: 130px">
              <el-option label="事件类型" value="事件类型" />
              <el-option label="事件等级" value="事件等级" />
              <el-option label="发生地点" value="发生地点" />
              <el-option label="驾驶员" value="驾驶员" />
              <el-option label="车牌号" value="车牌号" />
              <el-option label="处理状态" value="处理状态" />
            </el-select>
          </template>
        </el-input>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useUserDialog } from '@/stores/dialogUser.js'
import { usePasswordDialog } from '@/stores/dialogPassword.js'
import { useRoadDialog } from '@/stores/dialogRoad.js'
import { useNoticeStore } from '@/stores/notice.js'

import { queryEvents } from './Hooks/queryEvents'
import { viewAllEvents } from './Hooks/viewAllEvents'
import { useSearch } from './Hooks/useSearch.js'
import { changeEvent } from './Hooks/changeEvent'
import { addEvent } from './Hooks/addEvent'
import { useSingleAnalysis } from './Hooks/useSingleAnalysis'
import { useAccidentProneAreasChart } from './Hooks/useAccidentProneAreasChart'

import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import imgUrl from '@/assets/images/avatar.jpg'
const $router = useRouter()
const { showNotice } = useNoticeStore()
const { dialogUser } = toRefs(useUserDialog())
const { dialogPassword } = toRefs(usePasswordDialog())
const { dialogRoad } = toRefs(useRoadDialog())
let { options, select, search, keyUpSearch } = useSearch()
const { accidentProneAreasChart } = useAccidentProneAreasChart()
const user_type = localStorage.getItem('user_type')
const activeIndex = ref('0')
// 退出登录
const logOut = () => {
  // 1.清除登录状态
  localStorage.clear()
  ElMessage({
    type: 'success',
    message: '退出成功',
    duration: 500
  })
  // 2.路由到登录页面
  $router.push('/login')
}
</script>

<style scoped>
.el-menu {
  height: 50px;
}
.el-avatar {
  cursor: pointer;
}
.el-dropdown {
  position: absolute;
  right: 30px;
  top: 3px;
}
</style>
